<template>
  <Drawer
    placement="right"
    :closable="true"
    v-model="visible"
    width="400"
    scrollable
    @on-close="cancel"
  >
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_Condition.jpg"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          连接多个下游分支，若设定的条件成立则仅运行对应的分支，若均不成立则只运行“否则”分支
        </div>
      </div>
    </template>
    <div class="flex items-center justify-between">
      <div class="text-lg font-bold text-black">条件分支</div>
      <Button
        type="primary"
        size="small"
        icon="md-add"
        @click="addInput"
      ></Button>
    </div>
    <div
      class="mt-2 mb-16"
    >
    <draggable v-model="form.selectlist" animation="250">
      <template #item="{ element, index }">
      <div
        style="max-height: unset"
        class="h-full p-2 mb-2 border border-gray-300 border-solid rounded-md border-1"
      >
        <div class="flex items-center justify-between h-full mb-1 text-black">
          <div class="flex items-center h-full">
            <Icon
              type="md-reorder"
              size="18"
              color="#999"
              class="cursor-grab"
            />
            <span class="font-semibold text-md">{{
              index == 0 ? '如果' : '否则如果'
            }}</span>
            <div
              class="px-3 py-1 ml-2 text-xs text-black rounded-xs bg-slate-100"
            >
              优先级{{ index + 1 }}
            </div>
          </div>
          <Icon
            class="pointer"
            type="md-remove"
            size="16"
            @click.stop="removeInput(index)"
          />
        </div>
        <div class="flex h-full">
          <div class="condition-logic" v-if="element.publicjson.length > 1">
            <div class="left"></div>
            <Select
              v-model="element.andor"
              style="width: 50px"
              class="mr-2"
              size="small"
            >
              <Option :key="logic.value" :value="logic.value" v-for="logic in LOGIC_OPTIONS">{{logic.name}}</Option>
            </Select>
            <div class="right"></div>
          </div>
          <div class="h-full">
            <div
              v-for="(condition, cIndex) in element.publicjson"
              class="flex items-center mb-1"
              :key="cIndex"
            >
              <Select
                v-model="condition.condition"
                style="width: 50px"
                size="small"
                class="mr-2"
                @on-change="handleOperatorChange(index, cIndex, $event)"
              >
                <Option
                  v-for="operator in OPERATOR_OPTIONS[condition.vartype]"
                  :key="operator.mark"
                  :value="operator.mark"
                  :label="operator.mark"
                  >{{ operator.name }}</Option
                >
              </Select>
              <div>
                <Select class="mb-1" v-model="condition.varname" @on-change="handleVarnameChange(index, cIndex, $event)" >
                  <!-- <OptionGroup v-for="source in sourceOptions" :label="source.label" :key="source.id"> -->
                    <Option v-for="item in SOURCE_OPTIONS" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  <!-- </OptionGroup> -->
                </Select>
                <Input
                  v-model="condition.varparam"
                  :disabled="
                    !!OPERATOR_VALUES[condition.vartype][condition.condition]
                      ?.equal
                  "
                >
                  <template #prefix>
                    <p class="flex items-center h-full text-xs scale-75">
                      {{ condition.vartype }}
                    </p>
                  </template>
                </Input>
              </div>
              <Icon
                class="ml-2 pointer"
                type="md-remove"
                size="16"
                @click.stop="removeCondition(index, cIndex)"
              />
            </div>
          </div>
        </div>
        <Button
          @click.stop="addCondition(index)"
          icon="md-add"
          type="primary"
          size="small"
          :style="{
            'margin-left': element.publicjson.length > 1 ? '106px' : '56px',
            'margin-top': '6px',
          }"
          >新增</Button
        >
      </div>
    </template>
    </draggable>
      <div
        class="h-full p-2 mb-2 border border-gray-300 border-solid rounded-md border-1"
      >
        <span class="font-semibold text-md">否则</span>
      </div>
    </div>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable'

import { OPERATOR_OPTIONS, LOGIC_OPTIONS, OPERATOR_VALUES, SOURCE_OPTIONS } from '../../lib/constant';

const emit = defineEmits([
  'cancel',
]);

const props = defineProps({
  sourceOptions: {
    type: Object,
    default: () => {},
  },
  form: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '选择器',
  },
});

const addInput = () => {
  props.form.selectlist.push({
    andor: 'or',
    publicjson: [
     {
        varname: '',
        vartype: 'String',
        varparam: '',
        condition: '',
     }
    ]
  })
};
const removeInput = (index) => {
  props.form.selectlist.splice(index, 1);
};

const addCondition = (index) => {
  props.form.selectlist[index].publicjson.push({
    varname: '',
    vartype: 'String',
    varparam: '',
    condition: '',
  })
};

const removeCondition = (index, cIndex) => {
  props.form.selectlist[index].publicjson.splice(cIndex, 1);
};

const handleOperatorChange = (index, cIndex, e) => {
  const equal =
  OPERATOR_VALUES[props.form.selectlist[index].publicjson[cIndex].vartype][e]?.equal;
  if (equal) {
    props.form.selectlist[index].publicjson[cIndex].varparam = equal;
  } else {
    props.form.selectlist[index].publicjson[cIndex].varparam = '';
  }
};

const handleVarnameChange = (index, cIndex, e) => {
  console.log(index, cIndex, e) 
  props.sourceOptions.forEach(source => {
    const data = source.outputList.find(item => item.varname == e);
    if (data) {
      props.form.selectlist[index].publicjson[cIndex].vartype = data.vartype;
    }
  })
}


const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel')
};

defineExpose({
  init,
});
const visible = ref(false);
</script>
<style lang="scss">
.condition-logic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 50px;
  height: auto;

  .left,
  .right {
    border: 1px solid rgb(68 83 130 / 25%);
    width: 50%;
    height: calc(50% - 47px);
    translate: 50%;
  }
  .left {
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 6px;
  }
  .right {
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: 6px;
  }
}

.ivu-input-with-prefix {
  padding-left: 38px;
}
</style>
